<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>天津市运动地图</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <link rel="stylesheet" href="btn.css"/>
    <div id="float-btn" onclick="backToHome()">
        <img src="./image/hbtn.png" width="40px" height="40px">
    </div>
   <div id="container"></div>
    <style>
        html {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        body {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        #container {
            height: 100%;
            width: 100%;
            border-radius: 2;
            border: #383434;
            border-style: double;
            margin: 0;

        }
        body {
			margin: 0;
			padding: 0;
			height: 100vh;
   			 /* 背景渐变 */
    		background: linear-gradient(200deg,#ddd6f3,#faaca8);
			font-family: Arial, sans-serif;
		}
        .collision-btn.disable{
            background-image: none;
            color: lightgrey;
            border-color: lightgrey;
            cursor: not-allowed;
        }
        .collision-btn.disable:hover {
            background-color: #fff;
            border-color: lightgrey;
        }
        .input-card .btn{
            margin-right: .8rem;
        }
    </style>
</head>

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'88a3eab77553ae8bc8414d68f0c4eac6',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d35fe563d0a808e209697b78d324450b"></script>
<body>
<div class="input-card" style="width: auto;">
    <div class="input-item">
        <button id="add-layer-btn" onclick="showTentLayer()" class="btn">露营地图</button>
        <button id="rm-layer-btn" onclick="hideTentLayer()" class="btn">隐藏</button>
    </div>
    <div class="input-item">
        <button id="show-obj3d-btn" onclick="showWaterLayer()" class="btn">潜水地图</button>
        <button id="hide-obj3d-btn" onclick="hideWaterLayer()" class="btn">隐藏</button>
    </div>
    <div class="input-item">
        <button id="show-Kayak-btn" onclick="showKayakLayer()" class="btn">皮划艇图</button>
        <button id="hide-Kayak-btn" onclick="hideKayakLayer()" class="btn">隐藏</button>
    </div>
    <div class="input-item">
        <button id="show-fish-btn" onclick="showfishLayer()" class="btn">垂钓园图</button>
        <button id="hide-fish-btn" onclick="hidefishLayer()" class="btn">隐藏</button>
    </div>
</div>
<script>
    let url3 = new URL("./image/kayak.png",window.location.href)
// 设置一个图标对象
var icon = {
   // 图标类型，现阶段只支持 image 类型
   type: 'image',
   // 图片 url
   image: url3,
   // 图片尺寸
   size: [64, 30],
   // 图片相对 position 的锚点，默认为 bottom-center
   anchor: 'center',
};
// let waterurl = new URL("diving3.png",window.location.href)
// var watericon={
// // 图标类型，现阶段只支持 image 类型
// type: 'image',
//    // 图片 url
//    image: waterurl,
//    // 图片尺寸
//    size: [64, 30],
//    // 图片相对 position 的锚点，默认为 bottom-center
//    anchor: 'center',
// }
var textStyle = {
    fontSize: 12,
    fontWeight: 'normal',
    fillColor: '#22886f',
    strokeColor: '#fff',
    strokeWidth: 2,
    fold: true,
    padding: '2, 5',
};
var LabelsData = [
    {
        name: '天津潮白河皮划艇俱乐部',
        position: [117.30983, 39.71755],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 10,
        fold: true,
        icon,
        text: {
            // 要展示的文字内容
            content: '天津潮白河皮划艇俱乐部',
            // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
            direction: 'right',
            // 在 direction 基础上的偏移量
            offset: [-20, -5],
            // 文字样式
            style: {
                // 字体大小
                fontSize: 12,
                // 字体颜色
                fillColor: '#22886f',
                //
                strokeColor: '#fff',
                strokeWidth: 2,
                fold: true,
                padding: '2, 5',
            }
        }
    },

    {
        name: '天津海河皮划艇俱乐部',
        position: [117.220741, 39.115471],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 16,
        icon,
        text: {
            content: '天津海河皮划艇俱乐部',
            direction: 'right',
            offset: [-20, -5],
            style: textStyle
        }
    }
]
</script>
<script type="text/javascript" src="water.js"></script>
<script type="text/javascript">
    

    var markers = [];
    var allowWater = false;
    var allowTent=false;
    var layer = new AMap.LabelsLayer({
    zooms: [3, 20],
    zIndex: 1000,
    // collision: false,
    // 设置 allowCollision：true，可以让标注避让用户的标注
    allowWater,
    allowTent,
});
    // 图层添加到地图
    map.add(layer);

    // 初始化 labelMarker
    for (var i = 0; i < LabelsData.length; i++) {
        var curData = LabelsData[i];
        curData.extData = {
            index: i
        };

        var labelMarker = new AMap.LabelMarker(curData);

        markers.push(labelMarker);

    }
</script>
    <script type="text/javascript" src="tent.js"></script>
    <script type="text/javascript" src="fishing.js"></script>
    <script >
        // layer.add(markers);
    map.setFitView(null, false, [100, 150, 10,10]);
    function showTentLayer() {
        tentlayer.add(tentmarkers);
        tentlayer.show();
    
    }
    function hideTentLayer() {
        tentlayer.hide();
    }
    function showWaterLayer(){
        waterlayer.add(watermarkers);
        waterlayer.show();
    }
    function hideWaterLayer(){
        waterlayer.hide();
    }
    function showKayakLayer(){
        layer.add(markers);
        layer.show();
    }
    function hideKayakLayer(){
        layer.hide();
    }
    function showfishLayer(){
        fishlayer.add(fishmarkers);
        fishlayer.show();
    }
    function hidefishLayer(){
        fishlayer.hide();
    }
    function backToHome(){
        window.open("home.html", "_self");
    }
</script>
</body>
</html>